<template>
    <div class="login-page"
         v-loading.fullscreen.lock="fullscreenLoading"
         :element-loading-text="loadingText">
        <div class="login-container i-flex i-flex-column">
            <div class="login-header i-flex-none">
                <div class="header">
                    <i class="el-icon-back"></i>
                </div>
            </div>
            <div class="login-content i-flex-auto">
                <div class="login-wrapper">
                    <el-form :model="form"
                             :rules="rules"
                             status-icon
                             ref="form"
                             @submit.native.prevent="submitForm"
                             label-position="top"
                             class="demo-ruleForm">
                        <div class="title font-exo">
                            Login
                        </div>
                        <div class="title-info">
                            嘿!使用你的账号登录吧.
                        </div>
                        <el-form-item label="用户名:" prop="username">
                            <el-input prefix-icon="el-icon-my-yonghu"
                                      type="text"
                                      v-model="form.username"
                                      placeholder="请输入用户名"
                                      autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:" prop="password">
                            <el-input prefix-icon="el-icon-my-password"
                                      type="password"
                                      v-model="form.password"
                                      placeholder="请输入密码"
                                      autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="text-align: center;">
                                <el-button style="width: 100%;" class="font-exo" type="success" native-type="submit">
                                    Login
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>

            </div>

        </div>

    </div>
</template>

<script>
    import axios          from 'axios';
    import { mapActions } from 'vuex';

    export default {
        data() {
            return {
                form             : {
                    username: '',
                    password: '',
                },
                rules            : {
                    username: [
                        { required: true, message: '请输入 用户名', trigger: 'blur' },
                        { min: 3, message: '最少3个字符.', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入 密码', trigger: 'blur' },
                        { min: 3, message: '最少3个字符.', trigger: 'blur' }
                    ],
                },
                fullscreenLoading: false,
                loadingText      : '登录长跑....'
            };
        },
        mounted() {
            this.getBackground();
        },
        methods: {
            ...mapActions({
                'login': 'Auth/login',
                me     : 'Auth/me',
            }),
            async getBackground() {

            },
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.handleLogin();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[ formName ].resetFields();
            },
            async handleLogin() {
                this.fullscreenLoading = true;
                let arr                = await this.login(this.form);

                if (arr.code === 1) {
                    this.$notify({
                        type    : 'success',
                        title   : '成功',
                        message : '登录成功',
                        duration: 2000,
                    });
                    this.loadingText = '跳转中...';
                    setTimeout(() => {
                        this.$router.push('/');
                    }, 1000)
                }
                else if (arr.message) {
                    this.fullscreenLoading = false;
                    this.$notify.error({
                        title  : '错误!',
                        message: arr.message,
                    });
                    this.form.password = '';
                    this.$refs.form.clearValidate();
                }
            }
        }
    }
</script>

<style scoped lang="less">

    .login-container {
        background-color: #fff;
        box-shadow: 0 2px 12px 0 #dfe3eb;
        height: 100%;
        width: 100%;
        border-radius: 5px;
    }

    .header {
        color: #3dcc6d;
        font-size: 28px;
        padding: 18px;
        border-bottom: 1px solid #eaeef2;
    }

    .login-page {
        padding: 35px;
        background-color: #eaeff5;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: inherit;
            background-attachment: fixed;
            filter: blur(7px);
        }
    }

    .login-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 500px;
        transform: translate(-50%, -50%);

        .title {
            font-size: 28px;
            color: #2a2a2a;
            text-align: center;
            margin-bottom: 10px;
        }

        .title-info {
            text-align: center;
            font-size: 14px;
            margin-bottom: 28px;
            color: #4b4b4b;
        }

    }
</style>

<style lang="less">
    .login-page {
        .el-form--label-top .el-form-item__label {
            padding: 0;
            &::before {
                display: none;
            }
        }
    }
</style>
